<template>
    <el-radio-group v-model="size" label="size control" size="small">
    
  </el-radio-group>
    <div class="button-container">
      <el-button @click="openDel">批量删除</el-button>
   
      <el-date-picker
        v-model="editForm.payDate"
        value-format="YYYY-MM-DD"
        type='date'
        :disabled-date="disabledDate"
        :shortcuts="shortcuts"
        :size="size"
        placeholder="发放日期搜索" 
      />
      <el-button   @click="selectEmployeeSalary(1)">搜索</el-button>
      <el-button @click="openTolal" class="right-aligned-button">总计薪资</el-button>
    </div>
    <el-table :data="tableData.records" stripe border @selection-change="handleSelectionChange" style="width: 100%">
      <!-- <el-table-column prop="id" label="Id(一般不展示)" width="180" /> -->
      <el-table-column type="selection" width="40" align="center"></el-table-column>
      <el-table-column prop="personalSalary" label="个人底薪"></el-table-column>
<el-table-column prop="attendanceBonus" label="出勤奖金"></el-table-column>
<el-table-column prop="welfareBonus" label="福利奖金"></el-table-column>
<el-table-column prop="absenceDeduction" label="缺勤扣除"></el-table-column>
<el-table-column prop="otherSubsidies" label="其他补贴"></el-table-column>
<el-table-column prop="payDate" label="发放日期"></el-table-column>
<el-table-column prop="totalPayrol" label="总计"></el-table-column>
      <el-table-column label="操作" width="160" align="center"  >
        <template v-slot="scope">
          <el-button type="danger" round @click="openDelRow(scope.row.id)">删除  </el-button>
          <el-button type="success" round @click="openTolRow(scope.row.id)">总计</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :small="false"
        :page-sizes="[1,10, 20, 30, 40,50]"
        :disabled="false"
        layout="total,sizes, prev, pager, next,jumper"
        :total="dataTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      /> 
    
    <div>
      <!-- 全部删除提示框 -->
      <el-dialog title="提示" v-model="delVisible" width="300px" center>
        <div align="center">删除不可恢复，是否确定删除？</div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancelDel">取 消</el-button>
            <el-button type="primary" @click="deleteAll">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 删除一行提示框 -->
      <el-dialog title="提示" v-model="delRowVisible" width="300px" center>
        <div align="center">删除不可恢复，是否确定删除？</div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancelDel">取 消1</el-button>
            <el-button type="primary" @click="deleteRow">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <el-dialog title="提示" v-model="tolRowVisible" width="300px" center>
        <div align="center">是否确定计算薪资？</div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancelTol">取 消2</el-button>
            <el-button type="primary" @click="toltalRow">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <el-dialog title="提示" v-model=" totalVisible" width="300px" center>
        <div align="center">是否确定计算薪资？</div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancelTol">取 消3</el-button>
            <el-button type="primary" @click="toltalAllRow">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <el-dialog title="提示" v-model="  countVisible" width="300px" center>
        <div align="center">总计薪资</div>
        <template #footer>
          <span class="dialog-footer">
            <p>response.data.code</p>
            <el-button type="primary" @click="toltalAllRow">确 定</el-button>
          </span>
        </template>
      </el-dialog>
     
    </div>
  </template>
    
  <script lang="ts" setup>
  import { ref, onMounted, reactive } from 'vue'
  import emitter from "@/utils/emitter";
  import axiosHttp from '../http/AxiosUtil'

  /* -------------日期---------------------- */
const size = ref<'default' >('default')

const value1 = ref('')
const value2 = ref('')

const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}
  //当前页码
  const currentPage = ref(1)
  //数据总量
  const dataTotal = ref(100)
  //每页数据量
  const pageSize = ref(1)
  /* -------------分页---------------------- */
  //page-size 改变时触发,val点击的数据size
  const handleSizeChange = (val: number) => {
    pageSize.value= val;
    selectEmployeeSalary(1);
  }
  //	current-page 改变时触发
  const handleCurrentChange = (val: number) => {
    currentPage.value = val;
    selectEmployeeSalary(val)
  }
  //搜索关键字
  const payDate = ref(null)
  //打开新增弹窗
  const addSongVisible = ref(false)
 
  emitter.on("cancelAdd", (msg) => {
    addSongVisible.value = msg as boolean;
    selectEmployeeSalary(1);
  });
  //表格数据
  const tableData = ref({
    records: []
  })
  onMounted(() => {
    selectEmployeeSalary(1);
  })

function selectEmployeeSalary(current:number) {
  console.log(editForm.payDate)
  let param = new FormData();
  param.append('payDate',editForm.payDate);
  param.append('size',pageSize.value.toString());
  param.append('current',current.toString())
console.log(param)
  axiosHttp.post('/employeeSalary/getSalary', param).then(response => {
    let data = response.data
    tableData.value = data;
    dataTotal.value = data.total
  })
}

  /**
     * 编辑
     */
  const editVisible = ref(false);
  const editForm = reactive({
    payDate:"",
    pageSize:""
  });
  
  
    //在这等价于上方的formData
    // const param = {
    //   id:editForm.id,
    //   songName:editForm.songName,
    //   geci:editForm.geci,    
    //   fm:Object,
    // }
   
  
  /**
  * 删除
  */
  const idx = ref<String>("-1"); // 记录当前要删除的行
  const multipleSelection: any = ref([]); // 记录当前要删除的列表
  const delVisible = ref(false); // 显示删除框
  const delRowVisible = ref(false); // 显示删除一行框
  const tolRowVisible =ref(false);//显示总计薪资框
  const tolVisible =ref(false);
  const totalVisible = ref(false); // 显示总计所有薪资
  const countVisible =ref(false);
  
  
  
  function handleSelectionChange(val: any) {
    multipleSelection.value = val;
  }
  
  function deleteRow() {
    let idsList = [idx.value];
    deleteRequest(idsList);
  }
  function toltalRow() {
    let idsList = [idx.value];
    totalRequest(idsList);
  }
  function toltalAllRow() {
    let ids= [];
    for (let item of multipleSelection.value) {
      ids.push(item.id)
    }
    totalAllRequest(ids);
  }
  //打开删除窗
  function openDelRow(idsList: String) {
    delRowVisible.value = true
    idx.value = idsList
  }

  //  打开删除确认窗
  function openDel() {
    delVisible.value = true;
  }
  //关闭删除窗
  function cancelDel() {
    delVisible.value = false;
    delRowVisible.value = false;
  }
  //打开总计薪资窗口
  function openTolRow(idsList: String) {
    tolRowVisible.value = true
    idx.value = idsList
  }


 
  //关闭个人总计薪资窗口
  function cancelTol() {
    tolVisible.value = false;
    tolRowVisible.value = false;
    totalVisible.value = false;
  }
//  打开所有总计确认窗
function openTolal(idsList: String) {
  totalVisible.value = true;
  idx.value = idsList
  }
  //请求后端的删除接口
  function deleteRequest(idsList: any) {
    axiosHttp.post('/employeeSalary/delEmployeeSalary', JSON.stringify(idsList), {
      headers: {
        'Content-Type': 'application/json'//后端接口的参数需要加上@RequestBody
      }
    })
      .then(response => {
        if (response.data.code == '1') {
          ElMessage.info("删除成功！")
          cancelDel()
          multipleSelection.value = [];
          selectEmployeeSalary(1);
        } else {
          ElMessage.error("删除失败！")
        }
      })
  }
  //请求后端的总计薪资接口
  function totalRequest(idsList: any) {
    axiosHttp.post('/employeeSalary/sumSalary', JSON.stringify(idsList), {
      headers: {
        'Content-Type': 'application/json'//后端接口的参数需要加上@RequestBody
      }
    })
      .then(response => {
        if (response.data.code == '1') {
          ElMessage.info("计算成功！")
          
          
          cancelTol()
          multipleSelection.value = [];
          selectEmployeeSalary(1);
        }else{
          ElMessage.error("计算失败！");

        }
      })
  }
  //请求后端的总计薪资接口
  function totalAllRequest(idsList: any) {
    
    axiosHttp.post('/employeeSalary/sumTotalSalary', JSON.stringify(idsList), {
      headers: {
        'Content-Type': 'application/json'//后端接口的参数需要加上@RequestBody
      }
    })
      .then(response => {
        if (response.data.code == '1') {
          ElMessage.info("计算成功！")
          
          cancelTol()
          multipleSelection.value = [];
          selectEmployeeSalary(1);
        }else{
          ElMessage.error("计算失败！");

        }
      })
  }
  //删除请求
  function deleteAll() {
    let ids= [];
    for (let item of multipleSelection.value) {
      ids.push(item.id)
    }
    deleteRequest(ids)
  }
  /* -------------------------图片上传------------------------------ */
//   import { type UploadProps, type UploadFile, type UploadFiles, type UploadUserFile, type UploadRawFile, type UploadInstance, ElDialog } from 'element-plus'
// import { parseMinWidth } from 'element-plus/es/components/table/src/util.mjs';
//   //是否显示已上传图片
//   const disabled = ref(true)
//   //上传的文件信息
//   const fileList = ref<UploadUserFile[]>([])
//   //绑定的上传组件
//   const upload = ref<UploadInstance>()
  
//   //文件预览所需地址
//   const imageUrl = ref('')
//   //是否弹窗
//   const dialogVisible = ref(false)
//   //删除时候会触发的方法
//   const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
//     setTimeout(() => {
//       disabled.value = true;
//     }, 1000); //延时2秒钟执行
//     //显示已上传图
//   }
//   /* 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 */
//   const handleChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
//     console.log(uploadFile);
//     console.log(uploadFiles);
//     disabled.value = false;
//   }
//   //超出上传数量时触发的方法
//   const handleExceed: UploadProps['onExceed'] = (files) => {
//     //"!" 强制链式调用
//     //替换预览图片
//     upload.value!.clearFiles()
//     const file = files[0] as UploadRawFile
//     upload.value!.handleStart(file)
  
//     //用来保存图片，用以上传
//     fileList.value.splice(0, 1, file)
//   }
  /* -------------------------图片上传结束------------------------------ */
  /* data类型Url的形式：
    data:,<文本数据>
  
    data:text/plain,<文本数据>
  
    data:text/html,<HTML代码>
  
    data:text/html;base64,<base64编码的HTML代码>
  
    data:text/css,<CSS代码>
  
    data:text/css;base64,<base64编码的CSS代码>
  
    data:text/javascript,<Javascript代码>
  
    data:text/javascript;base64,<base64编码的Javascript代码>
  
    编码的gif图片数据
  
    编码的png图片数据
  
    编码的jpeg图片数据
  
    编码的icon图片数据
    */
  </script>
  <style scoped>
  .button-container {
    display: flex;
    justify-content: flex-end;
  }
  
  .right-aligned-button {
    margin-left: auto;
  }
  </style>
    